<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import { theme } from 'ant-design-vue';
import { RouterView } from 'vue-router';
import { Header, Menu, PayModal } from '@/components/index';
/* ----------------- 修改比例大小 ----------------- */
function updateScale() {
    // const screenWidth = window.innerWidth
    // const screenHeight = window.innerHeight

    // const scaleWidth = Number((screenWidth / 1080).toFixed(6))
    // const scaleHeight = Number((screenHeight / 1920).toFixed(6))
    // const scale = Math.min(scaleWidth, scaleHeight)

    // // 1. 设置 CSS 变量（如果其它地方还要用）
    // document.documentElement.style.setProperty('--scale', scale.toFixed(2))
    document.documentElement.style.setProperty('--scale', '1');
}

let resizeHandler = () => updateScale();
onMounted(() => {
    updateScale();
    window.addEventListener('resize', resizeHandler);
});

onUnmounted(() => {
    window.removeEventListener('resize', resizeHandler);
});
</script>

<template>
    <a-config-provider
        :theme="{
            algorithm: theme.darkAlgorithm,
            token: {
                colorPrimaryBg: '#242424',
                colorBgElevated: '#353535',
                colorBgMask: 'rgba(24,24,24,0.82)',
                Menu: {
                    colorBgElevated: '#fff'
                },
                Dropdown: {
                    colorBgElevated: '#000000'
                },
                Input: {
                    colorBorder: '#302F2F',
                    colorBgContainer: '#302F2F',
                    colorText: '#E6E6E6',
                    colorPrimaryHover: '#302F2F'
                },
                Select: {
                    colorBorder: '#302F2F',
                    colorBgContainer: '#302F2F',
                    colorText: '#E6E6E6',
                    colorBgElevated: '#000000',
                    colorPrimaryHover: '#302F2F'
                }
            }
        }"
    >
        <div class="flex h-screen w-full flex-col">
            <Header />
            <div class="flex h-[calc(100%-var(--scale)*100px)] gap-4">
                <Menu />
                <RouterView />
            </div>
        </div>

        <PayModal :open="false" />
    </a-config-provider>
</template>
